<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>FreeGroup Draw2D 0.9.26 demo. How to serialize the document to XML</title>
        <link type="text/css" rel="stylesheet" href="../demo.css" />

    <!-- common, all times required, imports -->        <SCRIPT src='../../wz_jsgraphics.js'></SCRIPT>      <SCRIPT src='../../mootools.js'></SCRIPT>      <SCRIPT src='../../moocanvas.js'></SCRIPT>      <SCRIPT src='../../draw2d.js'></SCRIPT>

        <!-- example specific imports -->
	<SCRIPT src="ToolInputBox.js"></SCRIPT>
	<SCRIPT src="ToolCheckBox.js"></SCRIPT>
	<SCRIPT src="ToolGroup.js"></SCRIPT>
	<SCRIPT src="ToolSave.js"></SCRIPT>
	<SCRIPT src="GUIPalette.js"></SCRIPT>

	<SCRIPT src="GroupFigure.js"></SCRIPT>
	<SCRIPT src="CheckBoxFigure.js"></SCRIPT>
	<SCRIPT src="InputBoxFigure.js"></SCRIPT>

	<SCRIPT src="XMLSerializer_01.js"></SCRIPT>

</head>
<body onselectstart="return false;" style="margin:0px;padding:0px;" onkeydown="">
<div id="paintarea" style="width:3000px;height:3000px" >

    <!-- The information help text -->
    <div style="background-color:white;border:1px solid gray;width:400px;padding:10px;font-size:8pt;">
    <center><b>Draw2D 0.9.26 - A FreeGroup Draw2D 0.9.26 demo<br>
    by Andreas Herz (a.herz @ freegroup.de)
    <br>
    </b>
    <br>
    <div style="color:red;font-size:9pt"><u>Focus of this example</u>: How to serialize the document to XML</div>
    </center>
    <br>
    <center>See more on <a href="http://www.draw2d.org">FreeGroup Draw2D 0.9.26</a></center>
    </div>

</div>
<script>
  var workflow  = new draw2d.Workflow("paintarea");

  // Add an annotation to the workflow area
  //
  var annotation = new draw2d.Annotation("NOTE: Click on the disk icon to show the XML in an alert window. Now it is easy to push the document to a server (AJAX call).");
  annotation.setDimension(250,70);
  workflow.addFigure(annotation,450,10);


  // Add the Tool Window to the screen
  //
  var w = new draw2d.GUIPalette();
  workflow.setToolWindow(w);

  // move the tool palette out of the hint message
  //
  w.setPosition(20,140);


  // Create a GUI Group (Form Element)
  //
  var group1 = new draw2d.GroupFigure("FORM 1");
  group1.setDimension(300,200);
  workflow.addFigure(group1,200,200);

  // create a HTML check box figure
  //
  var box = new draw2d.CheckBoxFigure();
  box.setDimension(80,20);
  workflow.addFigure(box,220,220);

  // assign the checkbox as a child of the group
  //
  group1.addChild(box);

  // create a second group 
  // Now you can drag&drop the input field or checkbox between the two groups.
  //
  var group2 = new draw2d.GroupFigure("FORM 2");
  group2.setDimension(300,200);
  workflow.addFigure(group2,550,200);

  window.onscroll=function(){workflow.onScroll();};
</script>
</body>
</html>
